<!DOCTYPE html>
<html lang="cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0/css/bootstrap.min.css">
	<script type="text/javascript" src="d3/d3.js"></script>
	<style type="text/css">
		.panelClass{
			width: 100%;
			padding: 10px 25%;
			margin:10px;
			border: 1px solid #44f;
			text-align: center;
		}
	</style>
	
</head>
<body onload="onLoad()">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="panelClass" id="test1"></div>
			</div>
			<div class="col-md-12">
				<div class="panelClass" id="test2"></div>
			</div>
			<div class="col-md-12">
				<div class="panelClass" id="test3"></div>
			</div>
			<div class="col-md-12">
				<div class="panelClass" id="test4"></div>
			</div>
			<div class="col-md-12">
				<div class="panelClass" id="test5"></div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		function onLoad(){
			test1();
			test2();
		}

		function test1(){
			var p = d3.select("#test1").text("hello");
			p.style("color","red").style("font-size","72px");
		}

		function test2(){
			var width = 400;
			var height = 300;
			var dataset=[1,2,4,5,7,8,4,7,2,1,2];

			var A=30,C=10,B=width-A-C;
			var D=20,F=0,E=height-D-F;
			var M=6,N=B/(dataset.length+1)-M;

			 //x例尺
			var x_linear = d3.scaleLinear()
	        .domain([0, dataset.length+1])
	        .range([0, B]);
	        //X坐标轴
	        var x_axis = d3.axisBottom()
	        .scale(x_linear)


			//y例尺
			var y_linear = d3.scaleLinear()
	        .domain([0, d3.max(dataset)])
	        .range([0,E]);
	        //Y坐标轴
	        var y_axis = d3.axisLeft()
	        .scale(y_linear)

	        //容器
			var svg = d3.select("#test2").append("svg")
			.attr("width",width)
			.attr("height",height);

			
			//svg添加矩形图
			svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x",function(d,i){ return x_linear(i)+M+A+N/2; })
			.attr("y",function(d,i){ return y_linear(d); })
			.attr("width",N)
			.attr("height",function(d,i){ return y_linear(d); })
			.attr("fill","steelblue");

			//svg添加坐标轴
			svg.append("g")
			.attr("transform","translate("+A+","+E+")")
			.call(x_axis);

			//svg添加坐标轴
			svg.append("g")
			.attr("transform","translate("+A+","+E+")")
			.call(y_axis);

			
		}	
	</script>
</body>
</html>